<template>
  <div style="display: flex; align-items: center">
    <el-popover
      placement="right"
      :width="400"
      trigger="click"
      v-model:visible="visible"
    >
      <template #reference>
        <el-icon style="cursor: pointer"><ChatRound /></el-icon>
      </template>
      <div>
        <div>
          <el-icon
            style="float: right; cursor: pointer"
            @click="visible = false"
            ><Close
          /></el-icon>
        </div>
        <el-input v-model="inputContent1" placeholder="请输入你的回复" />
        <el-button
          @click="test3"
          style="background-color: #4682b4; color: white; float: right"
          round
          >回复</el-button
        >
      </div>
    </el-popover>
  </div>
</template>
<script setup>
import { ChatRound, Close } from '@element-plus/icons-vue'
import { ref, defineProps } from 'vue'
import axios from 'axios'
const inputContent1 = ref('')
const visible = ref(false)
const props1 = defineProps(['index', 'if_Father', 'userNa'])

function test3() {
  if (props1.if_Father === 1) {
    axios({
      url: 'http://localhost:8080/Comment/son/add',
      method: 'post',
      contentType: 'application/json',
      headers: {
        token: localStorage.getItem('token')
      },
      data: {
        rootCommentId: props1.index,
        content: inputContent1.value
      }
    }).then(function (res) {
      alert(JSON.stringify(res.data.data))
    })
  } else {
    axios({
      url: 'http://localhost:8080/Comment/son/response',
      method: 'post',
      contentType: 'application/json',
      headers: {
        token: localStorage.getItem('token')
      },
      data: {
        otherName: props1.userNa,
        rootCommentId: props1.index,
        content: inputContent1.value
      }
    }).then(function (res) {
      alert(JSON.stringify(res.data.data))
    })
  }
}
</script>
